<template>
	<div class="resourcesManagement">
		<div class="crumbs-wrapper">
			<Crumbs title="资源管理" sub-title="IaaS资源" />
		</div>
		<div class="mainbox">
			<div class="nav">
				<div>
					<div class="treetitle">资源目录</div>
					<div class="searchbox">
						<el-input placeholder="请输入查询内容" v-model="nodeKeyword" size="small">
							<i slot="suffix" class="el-input__icon el-icon-search"></i>
						</el-input>
					</div>
					<div>
						<el-tree ref="refCatalogTree" :props="defaultProps" :data="catalogTreeData" node-key="catalogId" 
							default-expand-all highlight-current
							:expand-on-click-node="false" :render-content="renderContent"
							:filter-node-method="filterNode" @node-click="nodeClick">
						</el-tree>
					</div>
				</div>
				<div class="import-export">
					<div @click="openImportCatalog">
						<div class="iconfont icon-daochu"></div>
						<div>导入</div>
					</div>
					<div @click="exportCatalog">
						<div class="iconfont icon-daoru1"></div>
						<div>导出</div>
					</div>
				</div>
			</div>
			<div class="main">
				<el-tabs v-model="activeName">
					<el-tab-pane label="资源管理" name="resouce-list">
						<Resource v-if="activeName=='resouce-list'" :catalog="selectedTreeNode"></Resource>
					</el-tab-pane>
					<el-tab-pane v-if="!selectedTreeNode.rootNode" label="资源参数管理" name="params">
						<Params v-if="activeName=='params'"  :catalog="selectedTreeNode"></Params>
					</el-tab-pane>
				</el-tabs>
			</div>
		</div>
		
		<!-- 目录树节点新增 dialog -->
		<el-dialog title="新增节点" :visible.sync="createDialogVisible" width="35%">
			<div>
				<el-form :model="treeNode" label-width="100px">
					<el-form-item label="节点名称" required>
						<el-input v-model="treeNode.catalogName" placeholder="请输入节点名称"></el-input>
					</el-form-item>
					<el-form-item label="节点排序">
						<el-input v-model="treeNode.sort" type="number" placeholder="请输入节点排序"></el-input>
					</el-form-item>
				</el-form>
			</div>
			<span slot="footer">
				<el-button @click="createDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="saveAppendNode">确 定</el-button>
			</span>
		</el-dialog>
		
		<!-- 目录树节点编辑 dialog -->
		<el-dialog title="编辑节点" :visible.sync="editDialogVisible" width="35%">
			<div>
				<el-form :model="treeNode" label-width="100px">
					<el-form-item label="节点名称" required>
						<el-input v-model="treeNode.catalogName" placeholder="请输入节点名称"></el-input>
					</el-form-item>
					<el-form-item label="节点排序">
						<el-input v-model="treeNode.sort" placeholder="请输入节点排序"></el-input>
					</el-form-item>
				</el-form>
			</div>
			<span slot="footer">
				<el-button @click="editDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="saveEditNode">确 定</el-button>
			</span>
		</el-dialog>
		
		<!-- 目录树导入 dialog -->
		<el-dialog title="导入目录结构" :visible.sync="importCatalogDialogVisible" width="35%">
			<div>
				<el-upload action="/api/resources/catalog/import" ref="refImportCatalog"
					:auto-upload="false"
					:on-success="uploadCatalogSuccess"
					:on-error="(e) => { this.$message.error(e) }"
					:file-list="catalogFiles" :limit="1" name="file">
					<el-button size="small" type="success">选取文件</el-button>
					<div slot="tip" class="el-upload__tip">只能上传导出的文件，且字段不可更改</div>
				</el-upload>
			</div>
			<span slot="footer">
				<el-button size="small" @click="importCatalogDialogVisible = false">取 消</el-button>
				<el-button size="small" type="primary" @click="importCatalog">保 存</el-button>
			</span>
		</el-dialog>
		
	</div>
</template>
<script>
	import Resource from './resource.vue'
	import Params from './params.vue'
	export default {
		components: {
			Resource, Params
		},
		data() {
			return {
				nodeKeyword: '', //树节点搜索关键词
				createDialogVisible: false, //是否显示树节点新增
				editDialogVisible: false, //是否显示树节点编辑
				importCatalogDialogVisible: false, //导入目录窗口是否显示
				nodeDialogType: 'new', //树节点弹窗类型 ： 新增 / 编辑
				catalogFiles: [], //要上传的目录结构excel
				treeNode: { //要新增/编辑的树节点
					catalogName: '',
					sort: ''
				},
				selectedTreeNode: {}, //当前选中的树节点
				
				catalogTreeData: [],
				defaultProps: { //树形节点，属性别名定义
					'label': 'catalogName'
				},
				activeName: 'resouce-list'
			}
		},
		mounted() {
			this.loadCatalogTreeData();
		},
		methods: {
			uploadCatalogSuccess() {
				this.$message.success('目录上传成功')
				this.loadCatalogTreeData()
			},
			openImportCatalog() { //打开导入目录窗口
				this.importCatalogDialogVisible = true;
			},
			importCatalog() { //上传目录文件
				this.$refs.refImportCatalog.submit();
			},
			exportCatalog() { //导出目录
				this.$util.download('/api/resources/catalog/export')
			},
			loadCatalogTreeData() { //加载目录树
				this.$http({
					url: '/api/resources/catalog/list'
				}).then( res => {
					this.catalogTreeData = res.data.data;
					this.$nextTick(()=>{
						this.$refs.refCatalogTree.setCurrentKey(this.catalogTreeData[0].catalogId); //选中根节点
						this.selectedTreeNode = this.catalogTreeData[0]; //记录选中节点
					})
				})
			},
			nodeClick(data) {
				this.selectedTreeNode = data;
			},
			renderContent(h, { node, data, store }) {  //树的render函数
				// console.log(node);
				if(data.rootNode) { //如果是根节点，则不允许编辑删除
					return (
						<span class="custom-tree-node">
							<el-tooltip content={data.catalogName} effect="light" placement="top" open-delay="600" hide-after="2000">
								<span class="node-name">{data.catalogName}</span>
							</el-tooltip>
							<span>
								<el-button size="medium" type="text" icon="el-icon-plus" on-click={ () => this.appendNode(node,data) }></el-button>
							</span>
						</span>

					// <span class="custom-tree-node">
					// 	<span>{data.catalogName}</span>
					// 	<span>
					// 		<el-button size="medium" type="text" icon="el-icon-plus" on-click={ () => this.appendNode(node,data) }></el-button>
					// 	</span>
					// </span>
					);
				} else {
					return (
					// <span class="custom-tree-node">
					// 	<span>{data.catalogName}</span>
					// 	<span>
					// 		<el-button size="medium" type="text" icon="el-icon-plus" on-click={ () => this.appendNode(node, data) }></el-button>
					// 		<el-button size="medium" type="text" icon="el-icon-edit-outline" on-click={ () => this.editNode(node,data) }></el-button>
					// 		<el-button size="medium" type="text" icon="el-icon-delete"  on-click={ () => this.removeNode(node, data) }></el-button>
					// 	</span>
					// </span>
					<span class="custom-tree-node" >
						<el-tooltip content={data.catalogName} effect="light" placement="top" open-delay="600" hide-after="2000">
							<span class="node-name">{data.catalogName}</span>
						</el-tooltip>
						<span>
							<el-button size="medium" type="text" icon="el-icon-plus" on-click={ () => this.appendNode(node,data) }></el-button>
							<el-button size="medium" type="text" icon="el-icon-edit-outline" on-click={ () => this.editNode(node,data) }></el-button>
							<el-button size="medium" type="text" icon="el-icon-delete" on-click={ () => this.removeNode(node, data) }></el-button>
						</span>
					</span>
					);
				}
			},
			filterNode(value, data) { //过滤树节点
				// console.log(value, data);
				if (!value) return true;
				return data.label.indexOf(value) !== -1;
			},
			clickNode(data) { //点击树节点
				this.selectedTreeNode = data;
				this.loadTableData()
			},
			appendNode(node, data) { //节点新增前准备工作，同时弹出节点新增窗口
				this.selectedTreeNode = data; //记录当前选中的节点
				this.treeNode = {}
				this.createDialogVisible = true;
			},
			saveAppendNode() { //保存新增树节点
				this.$http({
					url: '/api/resources/catalog',
					method: 'POST',
					data: {
						...this.treeNode,
						"parentId": this.selectedTreeNode.catalogId
					}
				}).then( res => {
					let newNode = res.data.data;
					if(!this.selectedTreeNode.children) { //如果不存在则创建children
						this.$set(this.selectedTreeNode, 'children', [])
					}
					this.selectedTreeNode.children.push(newNode);
					this.createDialogVisible = false;
				})
			},
			editNode(node,data) { //树节点编辑前准备工作,同时弹出节点编辑窗口
				this.selectedTreeNode = data; //记录当前选中的节点
				this.treeNode = {...data};
				this.editDialogVisible = true;
			},
			saveEditNode() { //
				this.$http({
					url: '/api/resources/catalog/update',
					method: 'POST',
					data: this.treeNode
				}).then( res => {
					this.selectedTreeNode.catalogName = this.treeNode.catalogName;
					this.selectedTreeNode.sort = this.treeNode.sort;
					this.editDialogVisible = false;
				})
			},
			removeNode(node, data) {
				this.$confirm('此操作将删除该节点, 是否继续?', '提示', {
					type: 'error'
				}).then(() => {
					this.$http({
						url: `/api/resources/catalog/delete/${data.catalogId}`,
					}).then( res => {
						if(res.data.code == 200) {
							const parent = node.parent;
							const children = parent.data.children || parent.data;
							const index = children.findIndex(d => d.catalogId === data.catalogId);
							children.splice(index, 1);
						} else {
							this.$message.error(res.data.msg);
						}
					})
				})
			}
		},
		watch: {
			nodeKeyword(val) {
				// console.log(val);
				this.$refs.refCatalogTree.filter(val);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.resourcesManagement {
		height: calc(100vh - 100px);
		background-color: #f8f8f8;
		padding: 5px 30px 10px;

		.mainbox {
			display: flex;
			height: 92%;

			.nav {
				width: 350px;
				background-color: white;
				margin-right: 10px;
				box-sizing: border-box;
				padding: 20px 10px 10px 10px;
				font-size: 16px;
				position: relative;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.treetitle {
					border-bottom: 1px solid #eeeeee;
					padding-bottom: 20px;
				}
				.searchbox {
					margin: 15px 0;
				}
				.import-export {
					display: flex;
					justify-content: center;
					font-size: 14px;
					div {
						margin: 0 10px;
						text-align: center;
						cursor: pointer;
					}
				}
			}

			.main {
				flex: 1;
				background-color: white;
				overflow-y: auto;
				padding: 30px;
				position: relative;
			}
		}
	}
</style>
<style>
	.custom-tree-node {
	    flex: 1;
	    display: flex;
	    align-items: center;
	    justify-content: space-between;
	    font-size: 14px;
	    padding-right: 8px;
		overflow: hidden;
	}
	.node-name{
		overflow: hidden;
    	text-overflow: ellipsis;
    	white-space: nowrap;
	}
</style>
